<template>
	<view>
		<uv-list>
			<uv-list-item v-for="(item,index) in indexList" :customStyle="{padding: '10px'}" :key='index'>
				<view class="items">
					<view class="items-content">
						<view class="content">
							<view class="fa-title">
								<view class="title">
									{{item.roomName}}
								</view>
								<view class="floor">
									<span>({{item.floorName}})</span>
								</view>
							</view>
							<view class="seat">
								<span>{{item.seatName}}</span>
							</view>
							<view class="seat-time">
								预约时间:{{item.orderTime}}
							</view>
						</view>
						<view class="tagsbtn">
							<uv-tags v-if="item.status == '1'" type="warning" text="已预约"></uv-tags>
							<uv-tags v-if="item.status == '2'" type="success" text="已签到"></uv-tags>
							<uv-tags v-if="item.status == '3'" text="已签退"></uv-tags>
							<uv-tags v-if="item.status == '4'" type="error" text="已取消"></uv-tags>
						</view>
					</view>
					<view class="items-btn">
						<uv-button v-if="item.status == '1'" @click="cancelBtn(item)" shape="circle" size="small" plain
							type="error" text="取消预约">
						</uv-button>
						<uv-button @click="signBtn(item)" shape="circle" v-if="item.status == '1'"
							:customStyle="{marginLeft: '20px',marginRight: '20px',marginBottom: '8px'}" size="small"
							plain type="primary" text="签到"></uv-button>
							<uv-button @click="signOutBtn(item)" shape="circle" v-if="item.status == '2'"
								:customStyle="{marginLeft: '20px',marginRight: '20px',marginBottom: '8px'}" size="small"
								plain type="primary" text="签退"></uv-button>
					</view>
				</view>
				<uv-line></uv-line>
			</uv-list-item>
		</uv-list>
		<uv-load-more @loadmore='loadmore' :status="loadStatus"></uv-load-more>
		<!-- 信息提示 -->
		<uv-notify ref="uvToast"></uv-notify>
		<!-- 取消预约 -->
		<uv-modal showCancelButton :asyncClose="true" ref="cancelModal" title="系统提示" content='确定取消预约吗?'
			@cancel="cancelCancel" @confirm="cancelConfirm"></uv-modal>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getMySeatListApi,
		cancelApi,
		signApi,
		signOutApi
	} from '../../api/index.js'
	const loadStatus = ref('loadmore')
	const indexList = ref([])
	const currentPage = ref(1)
	const pageSize = ref(6)
	const pages = ref(0)
	const uvToast = ref();
	const getList = async () => {
		let res = await getMySeatListApi({
			currentPage: currentPage.value,
			pageSize: pageSize.value,
			stuId: uni.getStorageSync("userId")
		})
		if (res && res.code == 200) {
			pages.value = res.data.pages;
			indexList.value = indexList.value.concat(res.data.records)
			if (currentPage.value >= pages.value) {
				loadStatus.value = 'nomore'
			} else {
				loadStatus.value = 'loadmore'
			}
			console.log(indexList.value)
		}
	}
	//加载更多
	const loadmore = () => {
		if (currentPage.value >= pages.value) {
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		currentPage.value = ++currentPage.value;
		getList()
	}
	onReachBottom(() => {
		console.log('触底加载')
		if (currentPage.value >= pages.value) {
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		currentPage.value = ++currentPage.value;
		getList()
	})
	onLoad(() => {
		getList()
	})
	//取消预约按钮
	const cancelModal = ref();
	const parms = {
		selectId: ''
	}
	const cancelBtn = (item) => {
		parms.selectId = item.selectId
		cancelModal.value.open()
	}
	//取消-取消预约
	const cancelCancel = () => {
		cancelModal.value.close()
	}
	//取消预约 确定提交
	const cancelConfirm = async () => {
		let res = await cancelApi(parms)
		if (res && res.code == 200) {
			indexList.value =[]
			currentPage.value = 1;
			getList()
			uvToast.value.show({
				type: 'success',
				message: res.msg,
				bgColor: '#6ECEB0',
			})
			cancelModal.value.close()
		}
	}
	//签到
	const signBtn = async(item)=>{
		parms.selectId = item.selectId
		let res = await signApi(parms)
		if (res && res.code == 200) {
			indexList.value =[]
			currentPage.value = 1;
			getList()
			uvToast.value.show({
				type: 'success',
				message: res.msg,
				bgColor: '#6ECEB0',
			})
			cancelModal.value.close()
		}
	}
	//签退
	const signOutBtn = async(item)=>{
		parms.selectId = item.selectId
		let res = await signOutApi(parms)
		if (res && res.code == 200) {
			indexList.value =[]
			currentPage.value = 1;
			getList()
			uvToast.value.show({
				type: 'success',
				message: res.msg,
				bgColor: '#6ECEB0',
			})
			cancelModal.value.close()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}

	.items {
		display: flex;
		flex-direction: column;

		.items-content {
			display: flex;
			flex-grow: 1;

			.content {
				padding: 0rpx 15rpx;
				display: flex;
				flex-grow: 1;
				flex-direction: column;

				.fa-title {
					display: flex;
					align-items: center;
				}

				.title {
					color: #303133;
					font-size: 32rpx;
					font-weight: 600;
				}

				.floor {
					color: #606266;
					font-size: 28rpx;
				}

				.seat {
					color: #606266;
					font-size: 28rpx;
					padding: 10rpx 0rpx;
				}

				.seat-time {
					color: #606266;
					font-size: 28rpx;
				}
			}

			.tagsbtn {
				display: flex;
				align-items: center;
			}
		}

		.items-btn {
			display: flex;
			margin: 10px;
		}
	}
</style>
